<template>
  <el-row>
    <el-form :model="loginForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="loginForm"
    v-loading="loading" v-if="isRegister">
    <legend>登录界面</legend>
    <el-link type="info" :underline="false" style="margin-right: -480px;" @click="isRegister = false">
        注册 →
      </el-link>
    <p></p>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" class="checkbox">记住密码</el-checkbox>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>

  <el-form :model="loginForm" status-icon ref="ruleForm" label-width="100px" class="loginForm"
    v-loading="loading" v-else>
    <legend>注册界面</legend>
    <el-link type="info" :underline="false" style="margin-right: -480px;" @click="isRegister = true">
        登录 →
      </el-link>
    <p></p>
    <el-form-item label="用户名" required prop="username">
      <el-input v-model="regForm.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" required prop="password">
      <el-input type="password" v-model="regForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" required>
      <el-input type="password" v-model="regForm.repassword" autocomplete="off" ></el-input>
    </el-form-item>
    <el-form-item label="昵称" prop="nickname">
      <el-input v-model="regForm.nickname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="regForms">注册</el-button>
    </el-form-item>
  </el-form>
  </el-row>
</template>


<script>
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      regForm: {
        username: '',
        password: '',
        repassword: '',
        nickname: '',
      },
      repassword:'',
      checked: false,
      loading: false,
      isRegister: true,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    submitForm() {
      this.loading = true;
      axios.post('/user/login', {
        username: this.loginForm.username,
        password: this.loginForm.password,
      }).then(value => {
        this.loading = false;
        const data = value.data
        if (data.success) {
          this.$message.success("登录成功")
          let user = data.content;
          this.$store.commit('login', user);
          this.$router.push({ path: '/writeArticle' });
        } else {
          this.$message.error("用户名或密码输入有误，请重新输入")
          this.$router.push({ path: '/login' });
        }
      })
    },
    regForms(){
      if(this.regForm.repassword !== this.regForm.password){
        this.$message.error("两次密码输入不一致！")
      }else{
        this.loading = true;
      axios.post('/user/reg', {
        username: this.regForm.username,
        password: this.regForm.password,
        nickname: this.regForm.nickname,
      }).then(value => {
        this.loading = false;
        const data = value.data
        if (data.success) {
          this.$message.success("注册成功")
          location.reload()
        } else {
          this.$message.error("输入不规范，请重新输入")
        }
      })
      }
      
    }
  }
}
</script>

<style scoped>
legend {
  margin-left: 48%;
  margin-top: -28px;
  font-family: "楷体";
  font-size: 30px;
}

.loginForm {
  margin: 200px auto 100px;
  width: 400px;
  padding: 80px 100px 30px 0px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #dedede;
}

.checkbox {
  margin: 0px 0px 10px 100px;
}
</style>
